<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查看用户日志详情</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="div">
    <b style="color: red; font-size: 20px;">用户日志详情</b>

    <el-table :data="tableData">
        <el-table-column prop="id" label="日志id" ></el-table-column>

        <el-table-column prop="name" label="用户名"></el-table-column>
        <el-table-column prop="type" label="操作类型"></el-table-column>

        <el-table-column prop="date" label="操作日期"></el-table-column>
        <el-table-column prop="place" label="操作地点"></el-table-column>
        <el-table-column prop="equipment" label="操作设备"></el-table-column>

    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.page"
            :page-sizes="[5,10,15,20]"
            :page-size="pagination.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.counts">
    </el-pagination>

</div>
</body>
<script>
    new Vue({
        el: "#div",
        data: {
            dialogTableVisible4add: false,  //添加窗口显示状态
            dialogTableVisible4edit: false, //编辑窗口显示状态
            tableData: [],//表格数据
            pagination: {
                page: 1, //当前页
                pagesize: 10,    //每页显示条数
                counts: 0        //总条数
            },


        },
        methods: {
            findByPage() {
                axios.get("/logs", {
                    params: {
                        page: this.pagination.page,
                        pagesize: this.pagination.pagesize
                    }
                }).then(resp => {
                    // console.log(resp.data);
                    // console.log(resp.data.pageNum)
                    //处理响应结果，把响应结果给tableData赋值
                    this.tableData = resp.data.items;
                    //给分页条赋值
                    // this.pagination.currentPage = resp.data.pageNum;
                    this.pagination.counts = resp.data.counts;
                    // this.pagination.pageSize = resp.data.pageSize;
                })
            },
            submitUpload() {
                this.$refs.upload.submit();
            },
            handleSizeChange(val) {//当每页显示多少条记录发生变化时，执行此方法中的代码
                //把每页显示多少条的信息赋值给pagination的pageSize
                this.pagination.pagesize = val;
                //改变之后，需要执行页面重写加载，查询所有线路
                this.findByPage();
            },
            handleCurrentChange(val) {//当前页发生变化时，执行此方法中的代码
                //把当前页信息赋值给pagination的currentPage
                this.pagination.page = val;
                //改变之后重新加载线路列表
                this.findByPage();
            },
        },
        created() {
            //页面加载时，获取线路的分页信息
            this.findByPage();
        }
    });
</script>
</html>